/**
 * 负责读取app-navigator中的路由信息，根据路由地址按需加载组件示例页面
 */

import { defineComponent, reactive, DefineComponent, markRaw, watch } from 'vue'
import { injectAppNavigator } from './app.navigator'

export const AppNavigatorPage = defineComponent({
  setup() {
    const state = reactive({
      PageComponent: null as null | DefineComponent,
    })

    const navigator = injectAppNavigator()

    const utils = {
      reset: async () => {
        let { path } = navigator.state.route

        if (!path) {
          return
        }

        if (path.charAt(0) === '/') {
          path = path.slice(1)
        }
        const Component = (await import('story/pages/' + path)).default

        state.PageComponent = markRaw(Component)
      },
    }

    watch(() => navigator.state.route.path, utils.reset, { immediate: true })

    return () => {
      const { PageComponent } = state
      return <div class="app-navigator-page">{!!PageComponent ? <PageComponent /> : null}</div>
    }
  },
})
